import { View } from '@tarojs/components'
import './index.scss'
import classnames from 'classnames'
import { useState } from 'react'

function Animation() {

  // 0：初始状态
  // 1 结束状态  xxx
  const [process, setProcess] = useState(0)

  const [iconclassname, setIconclassname] = useState('cross')

  // -----

  function Change() {
    let _style
    if (process === 0) {
      _style = classnames('cross', { first: true })
      setIconclassname(_style)
      setProcess(1)
    }
    if (process === 1) {
      _style = classnames('cross', { first: true })
      setIconclassname(_style)
      setProcess(0)
    }
  }

  function TransitionEndhandler() {
    let _style2
    if (process === 1) {
      _style2 = classnames('cross', { first: true }, { second: true })
      setIconclassname(_style2)
    }
    if (process === 0) {
      setIconclassname('cross')
    }
  }


  // 0 -> 1     cross -> cross active
  // 1 -> 0     cross active -> cross active reactive -> end -> corss
  return (
    <View className='index'>
      <View className={iconclassname} onClick={Change}>
        <View className='line' onTransitionEnd={TransitionEndhandler}></View>
        <View className='line'></View>
        <View className='line'></View>
      </View>
    </View>
  )
}

export default Animation
